<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/XCW.css">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <!-- logo部分 -->
            <div class="logo">
                <img src="../xc-img/logo_03.png"  alt="">
            </div>
            <!-- 导航栏部分 -->
            <div class="navbar">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">职业规划</a></li>
                </ul>
            </div>
            <!-- 个人中心 -->
            <div class="personal">		
					<a href="#">个人中心 <img src="/xc-img/ling_06.png"  alt=""></a>
					<a href="#"><img src="/xc-img/tou_03.png" > 刘德华</a>
				</div>
            <!-- 搜索框部分 -->
            <div class="search">
                <form action="">
                        <input type="text" placeholder="请输入关键字">
                        <input type="submit" value="">
                </form>
            </div>

        </nav>
    </header>
    <!-- banner开始 -->
    <div class="banner">
        <!--多类名的使用 两个类名，使用完一个再用另一个 -->
        <div class="banner-in container">
            <!-- 左侧导航栏 -->
            <div class="slidebar">
                <ul>
                    <li><a href="#">前端开发 <span>></span> </a></li>
                    <li><a href="#">前端开发 <span>></span> </a></li>
                    <li><a href="#">前端开发 <span>></span> </a></li>
                    <li><a href="#">前端开发 <span>></span> </a></li>
                    <li><a href="#">前端开发 <span>></span> </a></li>
                    <li><a href="#">前端开发 <span>></span> </a></li>
                    <li><a href="#">前端开发 <span>></span> </a></li>
                    <li><a href="#">前端开发 <span>></span> </a></li>
                    <li><a href="#">前端开发 <span>></span> </a></li>
                </ul> 
            </div>  
            <!-- 右侧课表 -->
            <dl class="timetable">
                <dt>我的课程表</dt>
                <dd>
                    <h4>继续学习 程序语言设计</h4>
                    <p>正在学习-使用对象</p>
                </dd>
                <dd>
                    <h4>继续学习 程序语言设计</h4>
                    <p>正在学习-使用对象</p>
                </dd>
                <dd>
                    <h4>继续学习 程序语言设计</h4>
                    <p>正在学习-使用对象</p>
                </dd>
            
                <dd>
                    <a href="#">全部课程</a>
                </dd>
            </dl>
                
        </div> 
    </div>
    <div class="recommend container">
        <a href="#">精品推荐</a>
        <a href="#">Jquery</a>
        <a href="#">Spart</a>
        <a href="#">MySql</a>
        <a href="#">javaWeb</a>
        <a href="#">MySql</a>
        <a href="#">javaWeb</a>
        <a href="#">修改兴趣</a>
    </div>
    
</body>
</html>